<template>
  <div class="guest-home-page">
    <!-- 首页Banner -->
    <div class="relative">
      <img src="@/assets/images/zhagengaokong.png" alt="无人机Banner" class="w-full h-[513px] object-cover">
      <div class="absolute inset-0 flex items-center justify-center"></div>
    </div>

    <!-- 内容板块：2列网格布局 -->
    <div class="container mx-auto px-6 py-8">
      <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
        <!-- 左侧轮播图 -->
        <div class="bg-white rounded-lg shadow overflow-hidden">
          <img src="@/assets/images/xuptlogo.png" alt="轮播图" class="w-full h-auto object-cover">
        </div>

        <!-- 科研新闻 -->
        <div class="bg-white rounded-lg shadow p-6">
          <div class="flex items-center mb-3 border-b border-solid border-gray-400 pb-2">
            <i class="fa fa-newspaper text-primary mr-2"></i>
            <h2 class="text-xl font-bold">科研新闻</h2>
            <span class="ml-auto text-sm text-primary hover:underline cursor-pointer">更多</span>
          </div>
          <ul class="space-y-0">
            <li class="py-2 border-b border-dashed border-gray-300">
              <div class="flex items-start justify-between">
                <span>《西电峰电人学报》再次入选中国科技核心期刊</span>
                <span class="text-xs text-gray-500">2025.11.3</span>
              </div>
            </li>
            <li class="py-2 border-b border-dashed border-gray-300">
              <div class="flex items-start justify-between">
                <span>学校召开第三轮专项巡察工作见面会</span>
                <span class="text-xs text-gray-500">2025.11.3</span>
              </div>
            </li>
            <li class="py-2">
              <div class="flex items-start justify-between">
                <span>通信与信息工程学院举办“强基铸魂，职引未来”</span>
                <span class="text-xs text-gray-500">2025.11.3</span>
              </div>
            </li>
          </ul>
        </div>

        <!-- 招生信息 -->
        <div class="bg-white rounded-lg shadow p-6">
          <div class="flex items-center mb-3 border-b border-solid border-gray-400 pb-2">
            <i class="fa fa-graduation-cap text-primary mr-2"></i>
            <h2 class="text-xl font-bold">招生信息</h2>
          </div>
          <ul class="space-y-0">
            <li class="py-2 border-b border-dashed border-gray-300">
              <div class="flex items-start justify-between">
                <a href="https://zhaosheng.xupt.edu.cn/" target="_blank"
                  class="hover:text-primary transition-colors cursor-pointer">
                  本科生招生信息
                </a>
              </div>
            </li>
            <li class="py-2 border-b border-dashed border-gray-300">
              <div class="flex items-start justify-between">
                <a href="https://gr.xupt.edu.cn/xbwz/zsxx.htm" target="_blank"
                  class="hover:text-primary transition-colors cursor-pointer">
                  硕士生招生信息
                </a>
              </div>
            </li>
            <li class="py-2">
              <div class="flex items-start justify-between">
                <a href="https://gr.xupt.edu.cn/xbwz/wzsy/zsdt.htm" target="_blank"
                  class="hover:text-primary transition-colors cursor-pointer">
                  博士生招生信息
                </a>
              </div>
            </li>
          </ul>
        </div>

        <!-- 就业信息 -->
        <div class="bg-white rounded-lg shadow p-6">
          <div class="flex items-center mb-3 border-b border-solid border-gray-400 pb-2">
            <i class="fa fa-briefcase text-primary mr-2"></i>
            <h2 class="text-xl font-bold">就业信息</h2>
            <a href="http://jiuye.xupt.edu.cn/module/news?type_id=18080" target="_blank"
              class="ml-auto text-sm text-primary hover:underline cursor-pointer">
              更多
            </a>
          </div>
          <ul class="space-y-0">
            <li v-for="(news, index) in jobNewsList" :key="index" class="py-2 border-b border-dashed border-gray-300">
              <div class="flex items-start justify-between">
                <a :href="news.detailUrl" target="_blank" class="hover:text-primary transition-colors cursor-pointer">
                  {{ news.title }}
                </a>
                <span class="text-xs text-gray-500">{{ formatDate(news.date) }}</span>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>

    <!-- 友情链接与底部信息 -->
    <div class="bg-[#014a95] text-white py-4 border border-gray-300">
      <div class="container mx-auto px-6">
        <div class="flex flex-col md:flex-row items-start gap-4 mb-2">
          <div class="flex-grow">
            <div class="mb-4">
              <h3
                style="font-family:PingFangSC-bold; font-size:28px; line-height:39px; color:#fff; text-align:left; margin-bottom:0px;">
                友情链接
              </h3>
              <div class="w-36 h-1 bg-white"></div>
            </div>
            <div class="grid grid-cols-3 gap-x-8 gap-y-4">
              <a href="https://www.xupt.edu.cn" target="_blank"
                style="font-family:PingFangSC-regular; font-size:20px; line-height:28px; color:#fff; text-align:left;">学校官网</a>
              <a href="https://tg.xupt.edu.cn/" target="_blank"
                style="font-family:PingFangSC-regular; font-size:20px; line-height:28px; color:#fff; text-align:left;">通信与信息工程学院</a>
              <a href="https://dianxin.xupt.edu.cn/" target="_blank"
                style="font-family:PingFangSC-regular; font-size:20px; line-height:28px; color:#fff; text-align:left;">电子工程学院</a>
              <a href="https://automation.xupt.edu.cn/" target="_blank"
                style="font-family:PingFangSC-regular; font-size:20px; line-height:28px; color:#fff; text-align:left;">人工智能、自动化学院</a>
              <a href="http://lib.xiyou.edu.cn" target="_blank"
                style="font-family:PingFangSC-regular; font-size:20px; line-height:28px; color:#fff; text-align:left;">图书馆</a>
              <a href="http://cs.xupt.edu.cn" target="_blank"
                style="font-family:PingFangSC-regular; font-size:20px; line-height:28px; color:#fff; text-align:left;">计算机学院</a>
              <a href="http://jiuye.xupt.edu.cn" target="_blank"
                style="font-family:PingFangSC-regular; font-size:20px; line-height:28px; color:#fff; text-align:left;">就业创业信息网</a>
              <a href="https://gr.xupt.edu.cn/" target="_blank"
                style="font-family:PingFangSC-regular; font-size:20px; line-height:28px; color:#fff; text-align:left;">研究生院</a>
              <a href="https://jgy.xiyou.edu.cn/jgsz.htm" target="_blank"
                style="font-family:PingFangSC-regular; font-size:20px; line-height:28px; color:#fff; text-align:left;">经济与管理学院</a>
            </div>
          </div>
          <div class="w-full md:w-auto h-64 md:h-198 bg-gray-200 flex-shrink-0" style="background-color: #e5e5e5;">
            <img src="@/assets/images/xiaoxun.png" alt="右侧图片" class="w-full h-full object-cover">
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  name: 'GuestHome',
  data() {
    return {
      jobNewsList: [] // 存储就业新闻数据
    }
  },
  mounted() {
    this.fetchLatestNews() // 页面加载时请求数据
  },
  methods: {
    // 请求后端代理接口获取新闻
    async fetchLatestNews() {
      try {
        const res = await axios.get('/api/jiuye-news') // 后端代理接口
        console.log('后端返回数据：', res.data);
        this.jobNewsList = res.data;
      } catch (error) {
        console.error('获取就业新闻失败：', error)
        // 失败时使用默认数据
        this.jobNewsList = [
          { title: '就业推荐 | 每日招聘信息汇总', date: '2025-11-05', detailUrl: 'http://jiuye.xupt.edu.cn/module/news?type_id=18080' },
          { title: '就业推荐 | 每日招聘信息汇总', date: '2025-11-04', detailUrl: 'http://jiuye.xupt.edu.cn/module/news?type_id=18080' },
          { title: '就业推荐 | 每日招聘信息汇总', date: '2025-11-03', detailUrl: 'http://jiuye.xupt.edu.cn/module/news?type_id=18080' }
        ]
      }
    },
    // 日期格式化：2025-10-28 → 2025.10.28
    formatDate(dateStr) {
      return dateStr.replace(/-/g, '.')
    }
  }
}
</script>

<style scoped>
/* 首页容器恢复为块级元素 */
.guest-home-page {
  display: block;
}

/* 友情链接hover样式 */
::v-deep .grid.grid-cols-3.gap-x-8.gap-y-4 a:hover {
  color: #add8e6 !important;
  transition: color 0.3s;
}

/* 就业、招生信息链接hover样式 */
li a {
  color: inherit;
  text-decoration: none;
}

li a:hover {
  color: #014a95;
  transition: color 0.3s;
}
</style>